<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 显示省 -->
    <select id="province">
        <option>选择省份</option>
    </select>
    <!-- 显示市 -->
    <select id="city">
        <option>选择市区</option>
    </select>

    <script>
        // 1、省市地区二级联动，页面加载完毕后显示出可以选择的省份，当省改变显示省份对应的市
        // 2、实现省市区三级联动(可选)
        var data = [
            {
                name: '湖北省',
                children: ['武汉市', '荆州市', '洪湖市', '黄冈市']
            },
            {
                name: '广东省',
                children: ['广州市', '深圳市', '珠海市', '东莞市']
            },
            {
                name: '湖南省',
                children: ['长沙市', '岳阳市', '湘潭市', '株洲市']
            }
        ];
        // 1、显示出所有的省
        var provinceHtml = '<option value="-1">选择省份</option>';
        data.forEach(function (item, index) {
            // value属性是为了记录每一个option 对应的在data中元素的序号
            provinceHtml += `<option value="${index}">${item.name}</option>`
        })
        document.querySelector('#province').innerHTML = provinceHtml
        // 2、设置省的onchange事件
        document.querySelector('#province').onchange = function () {
            // if (this.value <= 0) {
            //     return;
            // }
            console.log(this.value)
            // 如果目前 获取到的是省份的名称  可以对data进行遍历 每一个元素比较 名称是否相同，如果相同 获取到元素下的children 就可以得到所有的市
            // 如果可以直接通过data[下标]方式获取到选中的省的信息，就可以避免循环
            // this.value 获取到当前选中的option对应的省在data中序号
            // data[this.value] 表示具体某一个省  格式为对象
            // data[this.value].children 表示省下所有市
            var cityHtml = '<option>选择市区</option>';
            data[this.value].children.forEach(function (item) {
                cityHtml += `<option>${item}</option>`
            })
            document.querySelector('#city').innerHTML = cityHtml
        }

    </script>
</body>

</html>